<template>
  <div class='product-page' v-if='actionPlantype == "0" || (actionPlantype == null && plantype == "0")'>
    <el-tabs type="border-card" @tab-click='tabChange'>
      <!------------商品提成模块--------------->
      <el-tab-pane label="商品提成">
        <el-row>
          <el-form label-width="80px" size="small" :inline="true">
            <el-col class='add-goods-btn'>
              <el-form-item label="商品品类:">
                <el-cascader props.checkStrictly props.expandTrigger="hover" :options="commodityCategoryList"
                             v-model="keywords.primaryClassifyId"
                             :show-all-levels="false" style='width: 150px;'
                ></el-cascader>
              </el-form-item>
              <el-form-item label="商品品牌:">
                <el-select v-model="keywords.brandId" style='width: 150px;'>
                  <el-option label="全部" :value="null"></el-option>
                  <el-option v-for="(item,key) in commodityBrandList" :label="item.name" :value="item.id"
                             :key="key"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否提成:">
                <el-select v-model="keywords.isCommission" style='width: 120px;'>
                  <el-option v-for='(item, index) in commissionList' :key='index' :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style='margin-left: 20px'>
                <el-input v-model="keywords.name" placeholder="输入商品名称搜索"
                          @keyup.enter.native='searchKeywords(0, "goodsTableData")' clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" plain @click='searchKeywords(0, "goodsTableData")'>查询
                </el-button>
              </el-form-item>
              <el-button style='float: right;margin-right: 30px;' type="primary" size="small" @click='editBatch(1)'
                         plain>商品活动期提成
              </el-button>
            </el-col>
          </el-form>
          <el-col style='margin-bottom: 10px;'>
            <el-button type="primary" size="small" icon="el-icon-edit" @click='editBatch(0)'>批量修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-table :data="goodsTableData" tooltip-effect="dark" style="width: 100%"
                      @selection-change="handleSelectionChange" stripe
                      :header-cell-style='{background:"rgb(245,247,250)"}' key='table1'>
              <el-table-column type="selection" width="55" align='center'></el-table-column>
              <el-table-column type="index" width="50" label='序号' align='center'></el-table-column>
              <el-table-column prop="goodsName" label="商品名称" align='center'></el-table-column>
              <el-table-column prop="primaryClassifyName" label="品类" show-overflow-tooltip
                               align='center'></el-table-column>
              <el-table-column prop="brand" label="品牌" align='center'></el-table-column>
              <el-table-column prop="goodsParameterList" label="规格型号" align='center'>
                <template slot-scope='scope'>
                  <div v-for='(item, index) in scope.row.goodsParameterList' :key='index'>
                    {{item.paramName}}：{{item.paramValue}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="goodsSalePrice" label="销售价" align='center'></el-table-column>
              <el-table-column prop="goodsMemberPrice" label="会员价" align='center'></el-table-column>
              <el-table-column prop="isCommission" label="是否提成" align='center'
                               :formatter='formatIsCommission'></el-table-column>
              <el-table-column prop="commissionWay" label="提成方式" align='center'
                               :formatter='formatCommissionWay'></el-table-column>
              <el-table-column prop="commissionValue" label="提成比例" align='center'
                               :formatter='formatCommissionValue'></el-table-column>
              <el-table-column label="操作">
                <template slot-scope='scope'>
                  <el-button type='text' @click='editBatch(0, scope.row.goodsId, scope.row.id)'>修改</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col class='mt20'>
            <el-pagination @size-change="handleSizeChange($event, 0, 'goodsTableData')"
                           @current-change="handleCurrentChange($event, 0, 'goodsTableData')"
                           :current-page="pageNum"
                           :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
      <!------------服务提成----------------->
      <el-tab-pane label="服务提成">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="serviceTabChange">
          <el-menu-item index="1">销售提成</el-menu-item>
          <el-menu-item index="2">劳动提成</el-menu-item>
        </el-menu>
        <el-row class='mt20'>
          <el-form label-width='86px' :inline='true' size='small' class='add-goods-btn'>
            <el-form-item label='是否提成：'>
              <el-select v-model="keywords.isCommission">
                <el-option v-for='(item, index) in commissionList' :key='index' :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model='keywords.name' placeholder='输入服务名称搜索' clearable
                        @keyup.enter.native='getCommercialTenant ("serviceCommissionTable")'></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type='primary' icon="el-icon-search" @click='getCommercialTenant ("serviceCommissionTable")'
                         plain>
                查询
              </el-button>
            </el-form-item>
          </el-form>
          <el-col style='margin-bottom: 10px;'>
            <el-button type='primary' icon='el-icon-edit' @click='editBatch(0)' size='small'>批量修改</el-button>
          </el-col>
          <el-table :data="serviceCommissionTable" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange" stripe
                    :header-cell-style='{background:"rgb(245,247,250)"}' key='table2'>
            <el-table-column type="selection" width="55" align='center'></el-table-column>
            <el-table-column type='index' align='center' label='序号'></el-table-column>
            <el-table-column prop="goodsName" label="服务名称" align='center'></el-table-column>
            <el-table-column prop="goodsSalePrice" label="销售价" align='center'></el-table-column>
            <el-table-column prop="goodsMemberPrice" label="会员价" align='center'></el-table-column>
            <el-table-column prop="isCommission" label="是否提成" align='center'
                             :formatter='formatIsCommission'></el-table-column>
            <el-table-column prop="commissionWay" label="提成方式" align='center'
                             :formatter='formatCommissionWay'></el-table-column>
            <el-table-column prop="commissionValue" label="提成比例" align='center'
                             :formatter='formatCommissionValue'></el-table-column>
            <el-table-column label="操作" align='center'>
              <template slot-scope='scope'>
                <el-button type='text' size='small' @click='editBatch(0, scope.row.goodsId, scope.row.id)'>修改
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-col class='mt20'>
            <el-pagination @size-change="handleSizeChange($event, 1, 'serviceCommissionTable')"
                           @current-change="handleCurrentChange($event, 1, 'serviceCommissionTable')"
                           :current-page="pageNum"
                           :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
      <!------------次卡提成----------------->
      <el-tab-pane label="次卡提成">
        <el-form label-width='86px' :inline='true' size='small' class='add-goods-btn'>
          <el-form-item label='是否提成：'>
            <el-select v-model="keywords.isCommission">
              <el-option v-for='(item, index) in commissionList' :key='index' :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model='keywords.name' placeholder='输入次卡名称搜索'></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model='keywords.times' placeholder='输入次数查询（1-10000）' @keyup.native='replace(keywords, "times")'
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type='primary' icon="el-icon-search" @click='getCommercialTenant ("subcardCommissionTable")'
                       plain>查询
            </el-button>
          </el-form-item>
        </el-form>
        <el-col style='margin-bottom: 10px;'>
          <el-button type='primary' icon='el-icon-edit' @click='editBatch(0)'>批量修改</el-button>
        </el-col>
        <el-table :data="subcardCommissionTable" tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange" stripe :header-cell-style='{background:"rgb(245,247,250)"}'
                  key='table3'>
          <el-table-column type="selection" width="55" align='center'></el-table-column>
          <el-table-column type='index' align='center' label='序号'></el-table-column>
          <el-table-column prop="goodsName" label="次卡名称" align='center'></el-table-column>
          <el-table-column prop="serviceName" label="对应服务" align='center'></el-table-column>
          <el-table-column prop="times" label="次数" align='center'></el-table-column>
          <el-table-column prop="goodsSalePrice" label="销售价" align='center'></el-table-column>
          <el-table-column prop="goodsMemberPrice" label="会员价" align='center'></el-table-column>
          <el-table-column prop="isCommission" label="是否提成" align='center'
                           :formatter='formatIsCommission'></el-table-column>
          <el-table-column prop="commissionWay" label="提成方式" align='center'
                           :formatter='formatCommissionWay'></el-table-column>
          <el-table-column prop="commissionValue" label="提成比例" align='center'
                           :formatter='formatCommissionValue'></el-table-column>
          <el-table-column label="操作" align='center'>
            <template slot-scope='scope'>
              <el-button type='text' size='small' @click='editBatch(0, scope.row.goodsId, scope.row.id)'>修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col class='mt20'>
            <el-pagination @size-change="handleSizeChange($event, 2, 'subcardCommissionTable')"
                           @current-change="handleCurrentChange($event, 2, 'subcardCommissionTable')"
                           :current-page="pageNum"
                           :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <!----------弹框------------------->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :center='dialogType == 0' :width='dialogWidth'
               :close-on-click-modal='false' :close-on-press-escape='false' :show-close='dialogType == 1'
               @close="handleClose">
      <!-----------修改商品/服务/次卡提成弹框---------------------------->
      <el-row v-if='dialogType == 0'>
        <el-form :model="editCommissionForm" label-width='120px'>
          <el-form-item label="是否提成" required>
            <el-radio v-model="editCommissionForm.isCommission" :label="0">是</el-radio>
            <el-radio v-model="editCommissionForm.isCommission" :label="1">否</el-radio>
          </el-form-item>
          <el-form-item label='选择提成方式' v-if='editCommissionForm.isCommission == "0"' required>
            <el-select v-model='editCommissionForm.commissionWay'>
              <el-option label='比例提成' :value='0'></el-option>
              <el-option label='固定提成' :value='1'></el-option>
            </el-select>
            <el-input v-model='editCommissionForm.commissionValue' style='width: 200px'
                      @keyup.native='replace(editCommissionForm, "commissionValue")'>
              <template slot='append'>
                <span v-if='editCommissionForm.commissionWay == "0"'>%</span>
                <span v-else>元</span>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <!---------------底部按钮----------->
        <div class='mt20' style='text-align: center'>
          <el-button @click="cansleDialog">取 消</el-button>
          <el-button type="primary" @click="commissionEdit()">确 定</el-button>
        </div>
      </el-row>
      <!-------------活动期商品提成列表---------------->
      <el-row v-if='dialogType == 1'>
        <el-form label-width='120px;' :inline='true' size='small'>
          <el-row type='flex' justify='space-between' class='add-goods-btn'>
            <el-col class='commission-tips'>
              注：活动期该商品的售卖按活动提成算，其他非活动期按常规提成算
            </el-col>
            <el-col>
              <el-button type="primary" icon="el-icon-plus" size='small' @click='editBatch(3)'>添加商品</el-button>
            </el-col>
          </el-row>
          <el-col class='add-goods-btn'>
            <el-form-item label='商品品类：'>
              <el-cascader props.checkStrictly props.expandTrigger="hover" :options="commodityCategoryList"
                           v-model="keywords.primaryClassifyId"
                           :show-all-levels="false" style='width: 150px;'
              ></el-cascader>
            </el-form-item>
            <el-form-item label='商品品牌：'>
              <el-select v-model="keywords.brandId" style='width: 150px;'>
                <el-option label="全部" :value="null"></el-option>
                <el-option v-for="(item,key) in commodityBrandList" :label="item.name" :value="item.id"
                           :key="key"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="keywords.name" placeholder="输入商品名称搜索"
                        @keyup.enter.native='activeGoodsList'></el-input>
            </el-form-item>
            <el-button type="primary" size='small' icon="el-icon-search" @click='activeGoodsList' plain>查询</el-button>
          </el-col>
          <el-col style='margin-bottom: 10px;'>
            <el-button type="primary" icon="el-icon-edit" size='small' @click='editBatch(2)'>批量修改</el-button>
            <el-button type="danger" icon="el-icon-delete" size='small' @click='deleteCommission(true)'>批量删除</el-button>
          </el-col>
        </el-form>
        <el-table :data="activityCommissionGoodsData" tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange" stripe :header-cell-style='{background:"rgb(245,247,250)"}'
                  key='table4'>
          <el-table-column type="selection" width="55" align='center'></el-table-column>
          <el-table-column type="index" width="50" label='序号' align='center'></el-table-column>
          <el-table-column prop="name" label="商品名称" align='center'></el-table-column>
          <el-table-column prop="primaryClassifyName" label="品类" show-overflow-tooltip align='center'></el-table-column>
          <el-table-column prop="brand" label="品牌" align='center'></el-table-column>
          <el-table-column prop="goodsParameterList" label="规格型号" align='center'>
            <template slot-scope='scope'>
              <div v-for='(item, index) in scope.row.goodsParameterList' :key='index'>
                {{item.paramName}}：{{item.paramValue}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="goodsSalePrice" label="销售价" align='center' width='100'></el-table-column>
          <el-table-column prop="goodsMemberPrice" label="会员价" align='center' width='100'></el-table-column>
          <el-table-column label="活动时间" align='center'>
            <template slot-scope='scope'>{{formatDate(scope.row.activityStart)}}至{{formatDate(scope.row.activityEnd)}}
            </template>
          </el-table-column>
          <el-table-column prop="commissionWay" label="提成方式" align='center' width='100'
                           :formatter='formatCommissionWay'></el-table-column>
          <el-table-column prop="commissionValue" label="提成比例" align='center' width='100'
                           :formatter='formatCommissionValue'></el-table-column>
          <el-table-column label="操作" align='center'>
            <template slot-scope='scope'>
              <el-button type='text' @click='editBatch(2, scope.row.goodsShopId, scope.row.id)'>修改</el-button>
              <el-button type='text' @click='deleteCommission(false, scope.row.id)'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-col class='mt20'>
          <el-pagination @size-change="handleSizeChange2($event, 5)"
                         @current-change="handleCurrentChange2($event, 5)"
                         :current-page="dialogPageNum"
                         :page-sizes="[5, 10, 20, 50]" :page-size="dialogPageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="dialogPageTotal">
          </el-pagination>
        </el-col>
      </el-row>
      <!-------------添加商品列表----------------->
      <el-page-header v-if='dialogType == "3"' slot='title' @back="editBatch(1)" class='cf'
                      content='添加商品'></el-page-header>
      <el-row v-if='dialogType == "3"'>
        <el-form label-width='120px;' :inline='true' size='small' class='add-goods-btn'>
          <el-form-item label='商品品类：'>
            <el-cascader props.checkStrictly props.expandTrigger="hover" :options="commodityCategoryList"
                         v-model="keywords.primaryClassifyId"
                         :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
          <el-form-item label='商品品牌：'>
            <el-select v-model="keywords.brandId">
              <el-option label="全部" :value="null"></el-option>
              <el-option v-for="(item,key) in commodityBrandList" :label="item.name" :value="item.id"
                         :key="key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否提成：">
            <el-select v-model="keywords.isCommission" style='width: 120px;'>
              <el-option v-for='(item, index) in commissionList' :key='index' :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="keywords.name" placeholder="输入商品名称搜索"
                      @keyup.enter.native="searchKeywords(0, 'goodsTableData')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchKeywords(0, 'goodsTableData')" plain>查询
            </el-button>
          </el-form-item>
        </el-form>
        <el-col style='margin-bottom: 10px;'>
          <el-button type="primary" icon="el-icon-setting" size='small' @click='editBatch(2)'>设置活动期提成</el-button>
        </el-col>
        <el-table :data="goodsTableData" tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange" stripe :header-cell-style='{background:"rgb(245,247,250)"}'
                  key='table5'>
          <el-table-column type="selection" width="55" align='center'></el-table-column>
          <el-table-column type="index" width="50" label='序号' align='center'></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align='center'></el-table-column>
          <el-table-column prop="primaryClassifyName" label="品类" show-overflow-tooltip align='center'></el-table-column>
          <el-table-column prop="brand" label="品牌" align='center'></el-table-column>
          <el-table-column prop="goodsParameterList" label="规格型号" align='center'>
            <template slot-scope='scope'>
              <div v-for='(item, index) in scope.row.goodsParameterList' :key='index'>
                {{item.paramName}}：{{item.paramValue}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="goodsSalePrice" label="销售价" align='center' width='100'></el-table-column>
          <el-table-column prop="goodsMemberPrice" label="会员价" align='center' width='100'></el-table-column>
          <el-table-column prop="isCommission" label="是否提成" align='center'
                           :formatter='formatIsCommission'></el-table-column>
          <el-table-column prop="commissionWay" label="提成方式" align='center' width='100'
                           :formatter='formatCommissionWay'></el-table-column>
          <el-table-column prop="commissionValue" label="提成比例" align='center' width='100'
                           :formatter='formatCommissionValue'></el-table-column>
          <el-table-column label="操作" align='center'>
            <template slot-scope='scope'>
              <el-button type='text' @click='editBatch(2, scope.row.goodsId, "")'>设置活动期提成</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-col class='mt20'>
          <el-pagination @size-change="handleSizeChange2($event, 0, 'goodsTableData')"
                         @current-change="handleCurrentChange2($event, 0, 'goodsTableData')"
                         :current-page="dialogPageNum"
                         :page-sizes="[5, 10, 20, 50]" :page-size="dialogPageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="dialogPageTotal">
          </el-pagination>
        </el-col>
      </el-row>
      <!-----------------设置活动期商品提成嵌套弹框--------------------------->
      <el-dialog width="600px" title="设置活动期商品提成" :visible.sync="innerVisible" :show-close='false' append-to-body center>
        <el-form :model="editCommissionForm" label-width='120px'>
          <el-form-item label="活动时间" required>
            <el-date-picker v-model="editCommissionForm.activityTime" type="datetimerange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :picker-options="pickerOptions" @change='selectedDateChange'>
            </el-date-picker>
          </el-form-item>
          <el-form-item label='选择提成方式' v-if='editCommissionForm.isCommission == "0"' required>
            <el-select v-model='editCommissionForm.commissionWay'>
              <el-option label='比例提成' :value='0'></el-option>
              <el-option label='固定提成' :value='1'></el-option>
            </el-select>
            <el-input v-model='editCommissionForm.commissionValue' style='width: 200px'
                      @keyup.native='replace(editCommissionForm, "commissionValue")'>
              <template slot='append'>
                <span v-if='editCommissionForm.commissionWay == "0"'>%</span>
                <span v-else>元</span>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="commissionEdit()">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import u from '@/util'
  import {
    commissionDetail,
    getCommercialTenant,
    deleteCommission,
    activeGoodsList,
    selectByGoodsId,
    getGoodsClassifyTreeList,
  } from '@/api'

  export default {
    name: 'product-piece-commission',
    data () {
      return {
        dialogTitle: '',              //弹框标题
        dialogVisible: false,         //全部商品提成修改弹框
        activityDialogVisible: false, //活动期提成添加商品弹框
        innerVisible: false,          //修改提成嵌套弹框
        dialogType: null,             //弹框类型
        dialogWidth: '',              //弹框宽度
        activityDialogWidth: '',      //活动弹框宽度
        selectedList: [],
        commodityCategoryList: [],        //商品品类列表
        commodityBrandList: [],           //商品品牌列表
        actionPlantype: this.actionPlanType,     //执行提成方案
        plantype: this.planType,
        commissionId: '',                        //方案id
        commissionRake: null,       // 提成对象:0-商品,1-服务,2-次卡,3-销售业绩,4-服务劳动,5-活动期商品
        editCommissionForm: {       //修改提成弹框数据
          isCommission: 0,
          commissionWay: 0,
          commissionValue: '',
          activityTime: [],
        },
        keywords: {
          brandId: null,
          primaryClassifyId: [null],
          isCommission: null,
          name: '',
          activityTime: [],
          times: ''
        },
        planeList: [{
          title: '产品常规计件提成',
          subtitle: '按员工个人所售产品计件提成'
        }, {
          title: '个人业绩阶梯提成',
          subtitle: '按员工个人业绩阶梯提成'
        }, {
          title: '暂不执行提成制度'
        }],
        commissionList: [{
          value: null,
          label: '全部'
        }, {
          value: 0,
          label: '是'
        }, {
          value: 1,
          label: '否'
        }],
        subcardCommissionTable: [],       //次卡商品列表
        goodsTableData: [],               //全部商品列表
        activityCommissionGoodsData: [],  //活动期提成商品
        serviceCommissionTable: [],       //服务提成
        total: 0,
        pageNum: 1,
        pageSize: 10,
        dialogPageSize: 10,    //弹框页标
        dialogPageNum: 1,      //弹框页标
        dialogPageTotal: 0,    //弹框页标
        shopId: '',
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
      }
    },
    computed: mapState(['merchantId', 'power', 'businessScope', 'isShop', 'soUrce']),
    props: ['actionPlanType', 'planType', 'selectedStore'],
    watch: {
      actionPlanType (newValue, oldValue) {
        this.actionPlantype = newValue
      },
      planType (newValue, oldValue) {
        this.plantype = newValue
      },
      selectedStore (newValue, oldValue) {
        if (this.isShop == '0') {
          this.shopId = this.merchantId
        } else {
          this.shopId = newValue
        }
      },
    },
    mounted () {
      if (this.isShop == '0') {
        this.shopId = this.merchantId
      } else {
        this.shopId = this.selectedStore
      }
    },
    methods: {
      initData (actionPlanType, planType) {
        this.actionPlantype = actionPlanType
        this.plantype = planType
        this.commissionRake = 0
        // if (this.businessScope && this.businessScope != 'undefined' && this.businessScope != 'null') {
        //   if (this.businessScope.indexOf(0) != -1) {
        //     this.commissionRake = 0
        //     this.getCommercialTenant('goodsTableData')
        //   } else if (this.businessScope.indexOf(1) != -1) {
        //     this.commissionRake = 1
        //     this.getCommercialTenant('serviceCommissionTable')
        //   }
        // } else {
        //   this.commissionRake = 0
        //   this.getCommercialTenant('goodsTableData')
        // }
        this.getCommercialTenant('goodsTableData')
        this.commodityBrand()
        this.commodityCategoryfun()
      },
      //------------------------------------------------------------------------列表
      //获取活动期提成商品列表
      activeGoodsList () {
        let data = {
          commissionId: this.commissionId,
          shopId: this.shopId,
          pageSize: this.dialogPageSize,
          pageNum: this.dialogPageNum,
          commissionRake: 5,
          category: this.keywords.primaryClassifyId[this.keywords.primaryClassifyId.length - 1],
          brand: this.keywords.brandId,
          isCommission: this.keywords.isCommission,
          name: this.keywords.name,
        }
        if (this.keywords.activityTime && this.keywords.activityTime.length > 0) {
          data.activityStart = u.getdatetime(this.keywords.activityTime[0]),
            data.activityEnd = u.getdatetime(this.keywords.activityTime[1])
        }
        activeGoodsList(data).then(res => {
          this.activityCommissionGoodsData = res.data.goodsList
          this.dialogPageTotal = res.data.pageTotal
        })
      },
      //条件筛选查询
      searchKeywords (commissionRake, list) {
        this.commissionRake = commissionRake
        this.getCommercialTenant(list)
      },
      //查询列表
      getCommercialTenant (list) {
        let primaryClassifyLast = this.keywords.primaryClassifyId[this.keywords.primaryClassifyId.length - 1]
        let type = null
        if (this.actionPlantype == null) {
          type = this.plantype
        } else {
          type = this.actionPlantype
        }
        let data = {
          shopId: this.shopId,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          planType: type,
          commissionRake: this.commissionRake,
          name: this.keywords.name,
          brandId: this.keywords.brandId,
          primaryClassifyId: primaryClassifyLast,
          isCommission: this.keywords.isCommission,
          times: this.keywords.times
        }
        //弹框中列表
        if (this.dialogVisible) {
          data.pageSize = this.dialogPageSize
          data.pageNum = this.dialogPageNum
        }
        getCommercialTenant(data).then(res => {
          this.$set(this, list, res.data.commissionDetail)
          this.total = +res.data.pageTotal
          this.dialogPageTotal = +res.data.pageTotal
          this.commissionId = res.data.id
        })
      },
      // 商品品牌
      commodityBrand () {
        selectByGoodsId({
          shopId: this.shopId,
          type: '0'
        }).then(res => {
          this.commodityBrandList = res.data.list
        })
      },
      // 商品品类
      commodityCategoryfun () {
        getGoodsClassifyTreeList().then(res => {
          let a = {
            value: null,
            label: '全部'
          }
          res.data.unshift(a)
          this.commodityCategoryList = res.data
        })
      },
      //------------------------------------------------------------------------操作
      //删除活动期提成
      deleteCommission (isBatch, id = '') {
        const h = this.$createElement
        if (this.selectedList.length == 0 && isBatch) {
          this.$message.error('请选择要删除的商品')
          return
        }
        this.$msgbox({
          title: '提示',
          message: h('div', null, [
            h('h4', null, '删除后将即时停止执行该商品的活动期提成，您确认要删除吗？'),
            h('p', null, '注：该商品在活动期已售卖/已过活动期的提成不受影响')
          ]),
          showCancelButton: true,
          confirmButtonText: '确认删除',
          cancelButtonText: '取 消',
          showClose: false,
          center: true,
          closeOnPressEscape: false,
          closeOnHashChange: false,
          closeOnClickModal: false
        }).then(() => {
          let arr = []
          if (isBatch) {
            arr = this.selectedList.map(function (item, index) {
              return item.id
            })
          } else {
            arr.push(id)
          }
          deleteCommission(arr).then(res => {
            if (res.code == 200) {
              this.activeGoodsList()
            }
          })
        }).catch(() => {
        })
      },
      //修改提成
      commissionEdit () {
        let list = ''
        let arr = []
        let activityS, activityE = ''
        switch (this.commissionRake) {
          case 0:
            list = 'goodsTableData'
            break
          case 1:
          case 4:
            list = 'serviceCommissionTable'
            break
          case 2:
            list = 'subcardCommissionTable'
            break
          //活动期提成修改
          case 5:
            list = 'activityCommissionGoodsData'
            if (!this.editCommissionForm.activityTime) {
              this.$message.error('请选择活动时间！')
              return
            }
            activityS = u.getdatetime(this.editCommissionForm.activityTime[0])
            activityE = u.getdatetime(this.editCommissionForm.activityTime[1])
            break
        }
        let value = this.editCommissionForm.commissionValue
        if (this.editCommissionForm.isCommission == '0' && (!this.editCommissionForm.commissionValue || value == 0)) {
          this.$message.error('请输入提成值且大于0！')
          return
        }
        let data = {
          companyId: this.merchantId,
          shopId: this.shopId,
          source: this.soUrce,
          commissionId: this.commissionId,
          commissionRake: this.commissionRake,
          isCommission: this.editCommissionForm.isCommission,
          commissionWay: this.editCommissionForm.commissionWay,
          commissionValue: this.editCommissionForm.commissionValue,
          activityStart: activityS,
          activityEnd: activityE
        }
        for (let i = 0; i < this.selectedList.length; i++) {
          if (this.selectedList[i].goodsId || this.selectedList[i].id || this.selectedList[i].goodsShopId) {
            let newObj = {}
            //活动期商品提成修改必须传goodsShopId
            if (this.dialogType == '1') {
              newObj = {
                goodsId: this.selectedList[i].goodsShopId,
                id: this.selectedList[i].id
              }
            } else if (this.dialogType == '3') {
              //添加商品时不传id
              newObj = {
                goodsId: this.selectedList[i].goodsId,
                id: ''
              }
            } else {
              newObj = {
                goodsId: this.selectedList[i].goodsId,
                id: this.selectedList[i].id
              }
            }
            let obj = Object.assign({}, data, newObj)
            arr.push(obj)
          }
        }
        commissionDetail(arr).then(res => {
          if (res.code == 200) {
            //关闭活动期提成修改提成弹框
            if (this.innerVisible) {
              this.innerVisible = false
            } else {
              //关闭商品/服务/次卡修改提成弹框
              this.dialogVisible = false
            }
            if (this.commissionRake != '5') {
              this.getCommercialTenant(list)  //列表数据
            } else {
              if (this.dialogType == '1') {
                this.activeGoodsList()
              } else if (this.dialogType == '3') {
                this.dialogType = 1
                this.activeGoodsList()
              }
            }
            this.editCommissionForm.isCommission = 0
            this.editCommissionForm.commissionWay = 0
            this.editCommissionForm.commissionValue = ''
            this.editCommissionForm.activityTime = []
            this.selectedList = []
          }
        })
      },
      //批量修改
      editBatch (type, goodsId = '', id = '',) {
        if (this.actionPlantype == null) {
          this.$message.error('请确认选择您需要的门店提成方案')
          return
        }
        switch (+type) {
          //商品or服务or次卡提成
          case 0:
            // 单条修改 or 批量修改
            if (id || goodsId) {
              this.selectedList = new Array({
                goodsId: goodsId,
                id: id
              })
            }
            switch (this.commissionRake) {
              //商品修改
              case 0:
                if (this.selectedList.length == 0) {
                  this.$message.error('请选择配置提成商品!')
                  return
                }
                this.dialogTitle = '设置商品提成'
                break
              //服务修改
              case 1:
                if (this.selectedList.length == 0) {
                  this.$message.error('请选择要设置的服务!')
                  return
                }
                this.dialogTitle = '设置服务销售提成'
                break
              //次卡提成修改
              case 2:
                if (this.selectedList.length == 0) {
                  this.$message.error('请选择要设置的次卡!')
                  return
                }
                this.dialogTitle = '设置次卡提成'
                break
              case 4:
                if (this.selectedList.length == 0) {
                  this.$message.error('请选择要设置的服务!')
                  return
                }
                this.dialogTitle = '设置服务劳动提成'
                break
            }
            this.dialogWidth = '600px'
            this.dialogType = type
            break
          //活动期商品提成列表
          case 1:
            this.commissionRake = 5
            this.initPagination2()
            this.activeGoodsList()  //活动期提成列表
            this.dialogWidth = '95%'
            this.dialogTitle = '活动期商品提成列表'
            this.dialogType = type
            break
          //活动期商品提成修改弹框
          case 2:
            // 单条修改 or 批量修改
            if (id || goodsId) {
              //活动期商品提成修改必须传goodsShopId
              if (this.dialogType == '1') {
                this.selectedList = new Array({
                  goodsShopId: goodsId,
                  id: id
                })
              } else {
                this.selectedList = new Array({
                  goodsId: goodsId,
                  id: id
                })
              }
            }
            if (this.selectedList.length == 0) {
              this.$message.error('请选择要设置的商品!')
              return
            }
            this.commissionRake = 5
            this.innerVisible = true
            break
          //添加商品弹框
          case 3:
            this.dialogType = type
            this.initPagination2()
            this.searchKeywords(0, 'goodsTableData')
            break
        }
        this.dialogVisible = true
      },
      //弹框取消
      cansleDialog () {
        this.dialogVisible = false
        this.editCommissionForm.isCommission = 0
        this.editCommissionForm.commissionWay = 0
        this.editCommissionForm.commissionValue = ''
        this.editCommissionForm.activityTime = []
        this.selectedList = []
      },
      tabChange (tab, event) {
        this.initPagination()
        if (tab.label == '商品提成') {
          this.commissionRake = 0
          this.getCommercialTenant('goodsTableData')
          return
        }
        if (tab.label == '服务提成') {
          this.commissionRake = 1
          this.getCommercialTenant('serviceCommissionTable')
          return
        }
        if (tab.label == '次卡提成') {
          this.commissionRake = 2
          this.getCommercialTenant('subcardCommissionTable')
          return
        }
      },
      //商品提成批量修改
      handleSelectionChange (val) {
        this.selectedList = val
      },
      serviceTabChange (val) {
        this.initPagination()
        //服务劳动列表
        if (val == '2') {
          this.commissionRake = 4
          this.getCommercialTenant('serviceCommissionTable')
        } else {
          this.commissionRake = 1
          this.getCommercialTenant('serviceCommissionTable')
        }
      },
      //分页函数
      handleSizeChange (val, commossionRake, list) {
        this.pageSize = val
        this.pageNum = 1
        this.commissionRake = commossionRake
        this.getCommercialTenant(list)
      },
      handleCurrentChange (val, commossionRake, list) {
        this.pageNum = val
        this.commissionRake = commossionRake
        this.getCommercialTenant(list)
      },
      //分页函数
      handleSizeChange2 (val, commossionRake, list) {
        this.dialogPageSize = val
        this.dialogPageNum = 1
        this.commissionRake = commossionRake
        if (commossionRake == '5') {
          this.activeGoodsList()
        } else {
          this.getCommercialTenant(list)
        }
      },
      handleCurrentChange2 (val, commossionRake, list) {
        this.dialogPageNum = val
        this.commissionRake = commossionRake
        if (commossionRake == '5') {
          this.activeGoodsList()
        } else {
          this.getCommercialTenant(list)
        }
      },
      //关闭活动期提成
      handleClose () {
        if (this.dialogType == '1') {
          this.commissionRake = 0
        }
      },
      cancel() {
        this.innerVisible = false
        this.editCommissionForm.activityTime = []
        this.editCommissionForm.isCommission = 0
        this.editCommissionForm.commissionWay = 0
        this.editCommissionForm.commissionValue = ''
      },
      //----------------------------------------------------------------------------数据格式化
      //活动期时间
      selectedDateChange (val) {
        if (!val) {
          return
        }
        let arr1 = u.foryear(val[0])
        let today = u.foryear(new Date())
        let todayTime = u.fortime(new Date())
        let todayStr = (new Date()).getTime()
        let arr1Str = Date.parse(val[0])
        if (arr1 == today && arr1Str < todayStr) {
          let todayArr = today.split('-')
          let todayTimeArr = todayTime.split(':')
          val[0] = new Date(todayArr[0],todayArr[1]-1,todayArr[2],todayTimeArr[0],todayTimeArr[1])
        }
      },
      //分页参数初始化
      initPagination () {
        this.pageSize = 10
        this.pageNum = 1
        this.total = 0
        this.keywords.brandId = null
        this.keywords.primaryClassifyId = [null]
        this.keywords.name = ''
        this.keywords.isCommission = null
        this.keywords.activityTime = []
        this.keywords.times = ''
      },
      //弹框中列表分页初始化
      initPagination2 () {
        this.dialogPageSize = 10
        this.dialogPageNum = 1
        this.dialogPageTotal = 0
        this.keywords.brandId = null
        this.keywords.primaryClassifyId = [null]
        this.keywords.isCommission = null
        this.keywords.name = ''
        this.keywords.activityTime = []
        this.keywords.times = ''
      },
      //数据格式化
      formatIsCommission (row, column, cellValue, index) {
        if (row.commissionValue == '' || +row.commissionValue === 0) {
          return '否'
        } else {
          return '是'
        }
      },
      formatCommissionWay (row, column, cellValue, index) {
        if (row.commissionValue == '' || +row.commissionValue === 0) {
          return '--'
        } else {
          return cellValue == 1 ? '固定提成' : '比例提成'
        }
      },
      formatCommissionValue (row, column, cellValue, index) {
        if (cellValue == '' || +cellValue === 0) {
          return '--'
        } else {
          if (row.commissionWay == '1') {
            return cellValue + '元'
          } else {
            return cellValue + '%'
          }
        }
      },
      formatDate (value) {
        let result = ''
        if (value) {
          let arr1 = value.split(' ')[0]
          let arr2 = value.split(' ')[1].split(':')
          result = arr1 + ' ' + arr2[0] + ':' + arr2[1]
        } else {
          result = '--'
        }
        return result
      },
      //字符串过滤
      replace (obj, key) {
        let that = this
        let event = event || window.event
        if (event.keyCode == 13) {
          setTimeout(() => {
            that.validItem(obj, key)
          }, 100)
        } else {
          that.validItem(obj, key)
        }
      },
      validItem (obj, key) {
        let res = ''
        switch (key) {
          case 'commissionValue':
            res = u.replaceFloat(obj[key])
            break
          case 'times':
            res = u.replaceNumber(obj[key])
            break
        }
        this.$set(obj, key, res)
      },
    }
  }
</script>

<style scoped>
  .mt20 {
    margin-top: 20px;
  }

  .dialog-footer {
    overflow: hidden;
  }

  .commission-tips {
    color: #F56C6C;
    margin-bottom: 20px;
  }

  .cf {
    color: #fff;
  }

  .btns-flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-right: 50px;
  }

  .add-goods-btn {
    border-bottom: 1px solid #EBEEF5;
    margin-bottom: 20px;
  }
</style>
<style>
  .cf .el-page-header__content {
    color: #fff;
  }
</style>


